<!DOCTYPE html>
<html>
  <head>
    <style>
      #response {
        white-space: pre-wrap;
      }
    </style>
  </head>

  <body>
    <div id="window-label"></div>
    <div id="container"></div>
    <div id="response"></div>

    <script>
      var WebviewWindow = window.__TAURI__.window.WebviewWindow
      var thisTauriWindow = window.__TAURI__.window.getCurrent()
      var windowLabel = thisTauriWindow.label
      var windowLabelContainer = document.getElementById('window-label')
      windowLabelContainer.innerText = 'This is the ' + windowLabel + ' window.'

      var container = document.getElementById('container')

      var responseContainer = document.getElementById('response')
      function runCommand(commandName, args, optional) {
        window.__TAURI__
          .invoke(commandName, args)
          .then((response) => {
            responseContainer.innerText += `Ok(${response})\n\n`
          })
          .catch((error) => {
            responseContainer.innerText += `Err(${error})\n\n`
          })
      }
      window.__TAURI__.event.listen('tauri://window-created', function (event) {
        responseContainer.innerText += 'Got window-created event\n\n'
      })

      var createWindowButton = document.createElement('button')
      var windowId = Math.random().toString().replace('.', '')
      var windowNumber = 1
      createWindowButton.innerHTML = 'Create child window ' + windowNumber
      createWindowButton.addEventListener('click', function () {
        runCommand('create_child_window', {
          id: `child-${windowId}-${windowNumber}`
        })
        windowNumber += 1
        createWindowButton.innerHTML = 'Create child window ' + windowNumber
      })
      container.appendChild(createWindowButton)
    </script>
  </body>
</html>
